<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .secondnav {
        margin: 0 auto;
        position: relative;
        width: 600px;
        height: 400px;
        border: 1px solid #00bdff;
    }
    
    .rightnav {
        display: none;
        width: 400px;
        height: 400px;
        position: absolute;
        top: 0;
        right: 0;
        background-color: burlywood;
    }
    
    .on {
        display: block;
    }
    
    li {
        list-style: none;
        width: 200px;
        height: 100px;
        background-color: chartreuse;
    }
    
    .active {
        background-color: burlywood;
    }
</style>

<body>
    <div class="secondnav">
        <ul>
            <li>
                <p>1</p>
                <div class="rightnav">一</div>
            </li>
            <li>
                <p>2</p>
                <div class="rightnav">二</div>
            </li>
            <li>
                <p>3</p>
                <div class="rightnav">三</div>
            </li>
            <li>
                <p>4</p>
                <div class="rightnav">四</div>
            </li>
        </ul>
    </div>
    <script>
        //用p的父元素li代替p，把li的高度和宽度设为p的大小，给li设置鼠标移入移出事件
        let lis = document.querySelectorAll('li')
        let secondnav = document.querySelector('.secondnav')
        let ps = document.querySelectorAll('p')
        let rightnavs = document.querySelectorAll('.rightnav')
        lis.forEach(function(li, index) {
            li.addEventListener('mouseenter', function() {
                console.log(111)
                lis.forEach(function(p) {
                    li.classList.remove('active')
                })
                this.classList.add('active')
                rightnavs.forEach(function(div) {
                    div.classList.remove('on')
                })
                rightnavs[index].classList.add('on')
            })
            li.addEventListener('mouseleave', function() {
                console.log(111)
                lis.forEach(function(p) {
                        li.classList.remove('active')
                    })
                    // this.classList.add('active')
                rightnavs.forEach(function(div) {
                        div.classList.remove('on')
                    })
                    // rightnavs[index].classList.add('on')
            })

            // li.addEventListener('click', function() {
            //     console.log(111);
            //     lis.forEach(function(li) {
            //         li.classList.remove('active')

            //     })
            //     this.classList.add('active')
            //     rightnavs.forEach(function(nav) {
            //         nav.classList.remove('on')
            //     })
            //     rightnavs[index].classList.add('on')
            // })
        })
    </script>
</body>

</html>